<template>
  <div class="orderDetail">
    <div class="content">
      <div class="head">
        <router-link to="/orderAfterSale">
          <div class="mar-right-10">售后订单</div>
        </router-link>
        <div class="arrow"></div>
        <div class="mar-right-10" v-if="state==='2'">售后详情</div>
        <div class="mar-right-10" v-if="state==='1'">申请售后</div>
      </div>
      <div class="orderTitle">
        <p class="fs16 fw-blod" v-if="state==='2'">售后编号：{{ orderData.afterFormid }}</p>
        <p class="fs16 fw-blod" v-if="state==='1'">订单号：{{ orderData.orderFormid }}</p>
      </div>
      <div class="status">
        <div class="top">
          <div class="state text-align">
            <p class="fs30 fw-blod" v-if="state==='1'">申请售后</p>
            <p class="fs24 fw-blod" v-if="orderData.afterState===1">审核中</p>
            <p class="fs24 fw-blod" v-if="orderData.afterState===2">退款中</p>
            <p class="fs24 fw-blod" v-if="orderData.afterState===3">退货中</p>
            <p class="fs24 fw-blod font-color-71B" v-if="orderData.afterState===4">退款成功</p>
            <p class="fs24 fw-blod" v-if="orderData.afterState===5">退款失败<br /><span class="font-color-999">(如有问题，请联系商家)</span></p>
            <p class="fs24 fw-blod" v-if="orderData.afterState===6">审核不通过</p>
            <p class="fs16 fw-blod" v-if="orderData.afterState===6">拒绝理由：{{ orderData.reason }}</p>
            <p class="fs24 fw-blod" v-if="orderData.afterState===7">评审中</p>
            <p class="fs24 fw-blod font-color-999" v-if="orderData.afterState===8">退货完成，拒绝退款</p>
            <p class="fs24 fw-blod font-color-999" v-if="orderData.afterState===9">已关闭</p>
            <p class="fs24 fw-blod" v-if="orderData.afterState===10">审核通过</p>
            <el-button
              plain
              v-if="orderData.afterState===6 || orderData.afterState===8"
              class="intervention mar-top-10"
              @click="platform"
            >申请平台介入</el-button>
            <el-button
              plain
              v-if="(orderData.afterState===1 && orderData.afterType===1)
                || (orderData.afterState===6 && orderData.afterType===1)
                || (orderData.afterState===10 && orderData.afterType===1)"
              class="intervention mar-top-10"
              @click="revokeRefund"
            >撤销申请</el-button>
            <el-button
              plain
              v-if="orderData.afterState===1 && orderData.afterType===2
                || orderData.afterState===6 && orderData.afterType===2"
              class="intervention mar-top-10"
              @click="revokeGoods"
            >撤销退货</el-button>
          </div>
        </div>
        <div class="bottom">
          <AfterSaleState v-if="state==='1'" :state="null" />
          <AfterSaleState v-else :state="orderData.afterState" />
        </div>
      </div>
      <div class="desc">
        <div class="storeInfo">
          <p class="title">卖家信息</p>
          <div class="info">
            <p>店铺名称：{{ orderData.shopName }}</p>
            <p>联系电话：{{ orderData.chargePersonPhone || orderData.shopPhone }}</p>
          </div>
        </div>
        <div class="orderInfo">
          <p class="title">订单信息</p>
          <div class="info">
            <p>订单号：{{ orderData.orderFormid }}</p>
            <p>支付渠道：{{ orderData.paymentMode }}</p>
            <p>交易号：{{ orderData.transactionId }}</p>
            <p>创建时间：{{ orderData.createTime }}</p>
            <p>付款时间：{{ orderData.paymentTime }}</p>
            <p v-if="orderData.receiveTime">成交时间：{{ orderData.receiveTime }}</p>
          </div>
        </div>
        <div class="productInfo">
          <div class="top">
            <p class="big"><span>宝贝</span></p>
            <p>宝贝属性</p>
            <p>状态</p>
            <p>数量</p>
            <p>单价</p>
          </div>
          <div class="bottom" v-for="(pro, idx) in orderData.skus" :key="idx">
            <div class="big">
              <img :src="pro.image" alt="" />
              <p>{{ pro.productName }}</p>
            </div>
            <div style="flex-direction: column;">
              <p v-for="(t, i) in pro.values" :key="i">{{ t }}</p>
            </div>
            <div v-if="orderData.state==1 || orderData.orderState==1">待付款</div>
            <div v-if="orderData.state==2 || orderData.orderState==2">待发货</div>
            <div v-if="orderData.state==3 || orderData.orderState==3">待收货</div>
            <div v-if="orderData.state==4 || orderData.orderState==4">已完成</div>
            <div v-if="orderData.state==5 || orderData.orderState==5">已关闭</div>
            <div>{{ pro.number }}</div>
            <div class="fs-bold" style="color: #C83732;">¥{{ pro.price }}</div>
          </div>
        </div>
        <div class="returnPrice" v-if="orderData.afterState===4">
          <div>
            <span class="mar-right-40">退款金额：</span>
            <span style="color: #C83732;">¥{{ orderData.price }}</span>
          </div>
        </div>
        <div class="apply" v-if="state==='1'">
          <div class="submitAS">
            <div class="itemBox">
              <div class="title">售后方式：</div>
              <el-select
                v-model="mode"
                placeholder="请选择售后方式"
                style="width:500px;"
              >
                <el-option
                  v-for="item in modes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
            <div class="itemBox">
              <div class="title">货物状态：</div>
              <el-select
                v-model="goodsState"
                placeholder="请选择货物状态"
                style="width:500px;"
              >
                <el-option
                  v-for="item in goodsStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </div>
            <div class="itemBox">
              <div class="title">售后理由：</div>
              <el-select
                v-model="reason"
                placeholder="请选择售后理由"
                style="width:500px;"
              >
                <el-option
                  v-for="item in reasons"
                  :key="item"
                  :label="item"
                  :value="item" />
              </el-select>
            </div>
            <div class="itemBox reason">
              <div class="title">原因描述：</div>
              <el-input
                type="textarea"
                :rows="6"
                placeholder="输入申请退货原因描述"
                v-model="textarea"
                maxlength="200"
                style="width:500px;" />
            </div>
            <div class="itemBox upload">
              <div class="title">上传凭证：</div>
              <el-upload
                :action="action"
                list-type="picture-card"
                :limit="3"
                :on-success="handleSuccess"
                :on-remove="handleRemove">
                <el-icon><Plus /></el-icon>
                <span>最多上传3张</span>
              </el-upload>
            </div>
            <div class="submit">
              <el-button plain :loading="btnLoading" @click="submit">提交申请</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AfterSaleState from '@/components/base/afterSaleState'
import { Plus } from '@element-plus/icons-vue'
import {
  upload
} from '@/api/upload.js'
import {
  getOrderDetail
} from '@/api/user/order.js'
import {
  submitAfter,
  getAfterSaleDetail,
  returnRefund,
  returnGoods,
  getReasons,
  requestPlatform
} from '@/api/user/afterSale.js'

const route = useRoute()
const router = useRouter()
const state = ref(null)
const btnLoading = ref(false)
const orderData = ref({})
const modes = [{
  value: 1,
  label: '仅退款'
}, {
  value: 2,
  label: '退货退款'
}]
const reasons = ref([])
const goodsStatus = [{
  value: 1,
  label: '已收到货'
}, {
  value: 0,
  label: '未收到货'
}]
const mode = ref('')
const reason = ref('')
const goodsState = ref('')
const textarea = ref('')
const skus = ref([])
const productPrice = ref(0)
const urls = ref([])
const orderId = ref('')
const afterId = ref('')
const action = upload
const image = ref([])

onBeforeMount(() => {
  state.value = route.query.state
  if (state.value === '2') {
    orderId.value = route.query.orderId
    afterId.value = route.query.afterId
  }
  if (state.value === '1') {
    getReasonSelect()
    getDetail()
  } else if (state.value === '2' || state.value === '3') {
    getASDetail()
  }
})

// 获取订单详情
const getDetail = async () => {
  const response = await getOrderDetail({
    orderId: JSON.parse(route.query.orderData).orderId
  })
  const res = response.data
  if (res.code === '200') {
    orderData.value = res.data
    orderData.value.skus = JSON.parse(route.query.orderData).skus
  } else {
    ElMessage.warning(res.message)
  }
}
// 获取售后订单详情
const getASDetail = async () => {
  const response = await getAfterSaleDetail({
    afterId: afterId.value,
    orderId: orderId.value
  })
  const res = response.data
  if (res.code === '200') {
    orderData.value = res.data
    image.value = res.data.image.split(',')
  } else {
    ElMessage.warning(res.message)
  }
}
// 撤销申请
const revokeRefund = async () => {
  const response = await returnRefund({
    afterId: orderData.value.afterId,
    orderId: orderData.value.orderId
  })
  const res = response.data
  if (res.code === '200') {
    ElMessage.success('撤销申请成功')
    getASDetail()
  } else {
    ElMessage.warning(res.message)
  }
}
// 撤销退货
const revokeGoods = async () => {
  const response = await returnGoods({
    afterId: orderData.value.afterId,
    orderId: orderData.value.orderId
  })
  const res = response.data
  if (res.code === '200') {
    ElMessage.success('撤销退货成功')
    getASDetail()
  } else {
    ElMessage.warning(res.message)
  }
}
// 申请平台介入
const platform = async () => {
  const response = await requestPlatform({
    afterId: orderData.value.afterId,
    orderId: orderData.value.orderId,
    image: '',
    reason: ''
  })
  const res = response.data
  if (res.code === '200') {
    ElMessage.success('申请平台介入成功')
    getASDetail()
  } else {
    ElMessage(res.message)
  }
}
// 选择退款原因查询
const getReasonSelect = async () => {
  const response = await getReasons()
  const res = response.data
  if (res.code === '200') {
    reasons.value = res.data
  } else {
    ElMessage.warning(res.message)
  }
}
// 申请售后
const submit = async () => {
  let errMsg = ''
  if (mode.value === '') {
    errMsg += ' 请选择售后方式 '
  }
  if (goodsState.value === '') {
    errMsg += ' 请选择货物状态 '
  }
  if (reason.value === '') {
    errMsg += ' 请选择售后理由 '
  }
  if (errMsg.length !== 0) {
    ElMessage.warning(errMsg)
    return
  }
  btnLoading.value = true
  productPrice.value = 0
  for (var i in orderData.value.skus) {
    skus.value[i] = {
      number: orderData.value.skus[i].number,
      skuId: orderData.value.skus[i].skuId
    }
    productPrice.value += orderData.value.skus[i].actualPrice
    if (parseInt(goodsState.value) === 0) {
      productPrice.value += orderData.value.skus[i].logisticsPrice
    }
  }
  const response = await submitAfter({
    afterType: mode.value,
    explain: textarea.value,
    goodsState: goodsState.value,
    image: urls.value.join(','),
    orderId: orderData.value.orderId,
    price: productPrice.value.toFixed(2),
    returnReason: reason.value,
    isAllSelect: 1,
    skus: skus.value
  })
  const res = response.data
  if (res.code === '200') {
    ElMessage.success({
      message: '售后申请成功',
      type: 'success'
    })
    setTimeout(() => {
      router.push('/orderAfterSale')
    }, 1000)
  } else {
    ElMessage.warning(res.message)
  }
  btnLoading.value = false
}
const handleSuccess = (res) => {
  urls.value.push(res.data.url)
}
const handleRemove = (file, fileList) => {
  urls.value = []
  for (var i in fileList) {
    urls.value.push(fileList[i].response.data.url)
  }
}
</script>
<style lang="scss">
.orderDetail{
  width: 100%;
  .content{
    width: 1250px;
    margin: 0 auto;
    .head {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      display: flex;
      align-items: center;
      .arrow {
        background-image: url('../../../static/image/xiangyou@2x.png');
        width: 5px;
        height: 10px;
        margin-right: 10px;
      }
    }
    .orderTitle{
      width: 100%;
      max-width: 1250px;
      height: 80px;
      margin: 20px 0;
      padding: 0 30px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      color: #333333;
      background: #FAFAFA;
      display: flex;
      align-items: center;
    }
    .status{
      width: 100%;
      height: 325px;
      border: 1px solid #E5E5E5;
      box-sizing: border-box;
      padding: 15px;
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      .top{
        flex: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        color: $mainGlod;
        .state{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
        .cancel{
          width: 100px;
        }
        .intervention{
          border-color: $mainGlod;
          color: $mainGlod;
          margin-left: 0;
        }
        .intervention:hover{
          background-color: rgba($color: $mainGlod, $alpha: 0.3);
        }
        .box{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
      .bottom{
        flex: 3;
        // padding: 20px;
        box-sizing: border-box;
      }
    }
    .desc{
      width: 100%;
      border: 1px solid #E5E5E5;
      margin-bottom: 140px;
      .storeInfo,.orderInfo{
        padding: 25px;
        border-bottom: 1px solid #E5E5E5;
        .title{
          font-size: 16px;
          margin-bottom: 25px;
        }
        .info{
          display: flex;
          margin-left: 75px;
          flex-wrap: wrap;
          p{
            line-height: 30px;
            width: 50%;
            font-size: 14px;
            margin-bottom: 10px;
          }
          .long{
            width: 100%;
          }
          .pic{
            margin-top: 10px;
            width: 100%;
            font-size: 14px;
            span{
              vertical-align: top;
              margin-right: 10px;
            }
            .el-image{
              img{
                margin-right: 10px;
              }
            }
          }
        }
      }
      .orderInfo{
        .info{
          p{
            width: 33.33%;
          }
        }
      }
      .productInfo{
        width: 100%;
        .top{
          height: 40px;
          width: 100%;
          color: #FFF;
          background-color: #333;
          display: flex;
          align-items: center;
          text-align: center;
          p{
            flex: 1;
            font-size: 12px;
          }
          .big{
            flex: 2;
            text-align: left;
            span{
              margin-left: 20px;
            }
          }
        }
        .bottom{
          width: 100%;
          padding: 20px 0;
          box-sizing: border-box;
          text-align: center;
          display: flex;
          border-bottom: 1px solid #E5E5E5;
          div{
            flex: 1;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            p{
              font-size: 14px;
              line-height: 20px;
            }
          }
          .big{
            text-align: left;
            flex: 2;
            display: flex;
            box-sizing: border-box;
            justify-content: flex-start;
            align-items: center;
            img{
              width: 80px;
              height: 80px;
              margin: 0 20px;
            }
            p{
              width: 50%;
            }
          }
        }
      }
      .settlement{
        width: 100%;
        display: flex;
        padding: 25px;
        box-sizing: border-box;
        justify-content: flex-end;
        .box{
          display: flex;
          .left{
            text-align: right;
            p{
              width: 250px;
              display: flex;
              justify-content: space-between;
              font-size: 20px;
              color: #666666;
              line-height: 30px;
            }
            .right{
              text-align: right;
              margin-left: 40px;
            }
          }
        }
      }
      .returnPrice{
        width: 100%;
        padding: 50px 50px;
        font-size: 20px;
        box-sizing: border-box;
        text-align: right;
        border-bottom: 1px solid #E5E5E5;
      }
      .apply{
        width: 100%;
        padding: 25px;
        box-sizing: border-box;
        .submitAS{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
          .itemBox{
            width: 580px;
            display: flex;
            margin: 10px;
            .title{
              min-width: 80px;
              line-height: 40px;
              text-align: right;
            }
            :deep(.el-input__icon){
              color: $mainGlod;
            }
          }
          .reason{
            position: relative;
          }
          .upload{
            display: flex;
            .title{
              line-height: 40px;
            }
            .el-upload--picture-card {
              height: 140px;
              background-color: #FFF;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              i{
                font-size: 32px;
                margin-bottom: 10px;
              }
              &:hover{
                i{
                color: $mainGlod;
                }
              }
            }
          }
          .submit{
            margin: 30px 0;
            .el-button{
            width: 200px;
            height: 50px;
            color: #FFF;
            background-color: #333333;
            border-radius: 0px;
            }
          }
          :deep(.el-select-dropdown__item){
            &:hover{
              background: $mainGlod;
            }
          }
        }
      }
    }
  }
}
</style>
